<template>
  <div class="store-brief page">
    <div class="nav-bar">
      <van-nav-bar title="门店详情" class="bg_white" left-arrow fixed @click-left="$router.go(-1)" />
    </div>
    <!-- 轮播图s -->
    <div class="carousel_div">
      <wt-carousel :options="carousel_option">
        <div class="carousel-item" v-for="(item,index) of swiperList" :key="index"><a :href="item.href"><img :src="item.img"></a></div>
      </wt-carousel>
    </div>
    <!-- 轮播图e -->
    <div class="content" ref="webview">
      <div class="nodata" style="max-height:300px" v-if="!storeInfo">暂无数据</div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="storeInfo">
        <template>
            <div class='storeInfo_div'>
                <div class="storeInfo">
                    <p class="store_name">{{storeInfo.name}}
                        <span class="tag" v-for="(item,index) of tagList" :key="index">{{item}}</span>
                    </p>
                    <p class="store_address">{{storeInfo.address}}</p>
                </div>
                <div class="nav_div"><img src="/static/img/store/brief/nav_icon.png" alt=""></div>
            </div>
            <div class="choise_div">
                <div class="choise_one left">
                    <img src="/static/img/store/brief/evalute.png" alt="">
                    用户评价
                </div>
                <div class="stright"></div>
                <div class="choise_one right" @click="goDetails(storeInfo.id)">
                    <img src="/static/img/store/brief/detail_icon.png" alt="">
                    门店详情
                </div>
            </div>
            <div class="hot_div">
                <p class="hot_title">热门产品</p>
                <div class="hot_list">
                    <div class="hot_one" v-for="(item,index) of hotGoodsList" :key="index">
                        <div class="one_img"><img :src="item.img" alt=""></div>
                        <div class="one_info">
                            <p class="one_name">{{item.name}}</p>
                            <p class="one_detail">{{item.detail}}</p>
                        </div>
                        <div class="one_price">
                            <p>￥<span>{{item.price}}</span></p>
                            <span class="one_pay">在线付款</span>
                        </div>
                    </div>
                </div>
            </div>
        </template>
      </van-pull-refresh>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'storeBrief',
  data () {
    return {
      carousel_option: {
        auto: true,
        loop: true,
        pagination: false,
        time: 3000
      },
      isActive: 2,
      apiUrl: 'getStoreBrief',
      id: this.$route.query.id,
      storeInfo: { id: this.$route.query.id, name: '深圳龙岗门店', address: '深圳市龙岗区龙岗大道3465号' },
      tagList: ['热销门店', '好评连连'],
      swiperList: [
        { img: '/static/img/store/brief/banner1.png', href: '#' },
        { img: '/static/img/store/brief/banner1.png', href: '#' },
        { img: '/static/img/store/brief/banner1.png', href: '#' },
        { img: '/static/img/store/brief/banner1.png', href: '#' },
        { img: '/static/img/store/brief/banner1.png', href: '#' }
      ],
      hotGoodsList: [
        { id: 1, img: '/static/img/store/brief/good1.png', href: '#', name: '情趣体验智能型', price: '598', detail: '598元/90分钟' },
        { id: 2, img: '/static/img/store/brief/good2.png', href: '#', name: '情趣娃娃租赁', price: '115', detail: '普通型/5天' },
        { id: 3, img: '/static/img/store/brief/good3.png', href: '#', name: '情趣娃租赁', price: '115', detail: '智能型/5天' }
      ]
    };
  },
  mixins: [mixins],
  created () {
    // this.getList('getStoreList', true);
  },
  methods: {
    goDetails (id) {
      this.$router.push({ 'path': './sdetail', query: { id: id } });
    }
  }
};
</script>
<style lang="less" scoped>
::-webkit-scrollbar{
  display: none;
  height:0;
}
.store-brief {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .storeInfo_div{
        padding:30px;
        width:100%;
        display: flex;
        .storeInfo{
            width:85%;
            display: flex;
            align-items: center;
            flex-wrap:wrap;
            .store_name{
                color:#333;
                font-size: 35px;
                font-weight: bold;
                width:100%;
                .tag{
                    color:#EC905E;
                    border:1px solid #E5F4FF;
                    border-radius: 30px;
                    text-align:center;
                    height:30px;
                    line-height: 40px;
                    padding:5px 10px;
                    font-size: 25px;
                    margin-left:10px;
                }
            }
            .store_address{
                color:#888888;
                font-weight: bold;
                font-size: 25px;
                margin-top: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:2;
                overflow: hidden;
            }
        }
        .nav_div{
            width:15%;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width:50px;
            }
        }
    }
    .choise_div{
        border-bottom: 2px solid #F3F3F3;
        width:100%;
        display: flex;
        flex-wrap:nowrap;
        position: relative;
        .stright{
            width:2px;
            background: #D0EBFF;
            height:80%;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
        .choise_one{
            width:50%;
            box-sizing: border-box;
            padding:20px 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: bold;
            img{
                width:40px;
                margin-right: 10px;
            }
        }
        .left{
            color:#878888;
        }
        .right{
            color:#EC905E;
        }
    }
    .hot_div{
        padding:20px 30px;
        .hot_title{
            width:100%;
            position: relative;
            padding-left: 30px;
            color:#272727;
            font-weight: bold;
            font-size: 40px;
            height:50px;
            line-height: 50px;
            &::before{
                position:absolute;
                left:0;
                top:50%;
                transform: translate(0,-50%);
                content:'';
                width:10px;
                height:80%;
                background: #EC905E;
            }
        }
        .hot_list{
            width:100%;
            height:auto;
            .hot_one{
                width:100%;
                display: flex;
                flex-wrap:nowrap;
                justify-content: space-between;
                padding:20px 0;
                border-bottom:3px solid #E6E6E6;
                .one_img,.one_price{
                    width:25%;
                    img{
                        width:100%;
                    }
                }
                .one_info{
                    width:45%;
                    font-size: 30px;
                    font-weight: bold;
                    display: flex;
                    align-content: center;
                    flex-wrap:wrap;
                    .one_name{
                        color:#333;
                        width:100%;
                    }
                    .one_detail{
                        color:#C0C0C0;
                        margin-top:20px;
                    }
                }
                .one_price{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap:wrap;
                    color:#FC5260;
                    font-weight: bold;
                    p{
                        font-size: 30px;
                        span{
                            width:100%;
                            font-size: 45px;
                        }
                    }
                    .one_pay{
                        color:#EC905E;
                        border:4px solid #F2914A;
                        border-radius: 10px;
                        text-align: center;
                        padding:5px;
                        font-size: 25px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>
